<template>
  <div class="content">
    <el-form inline :model="form">
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          v-model="form.startTime"
          size="mini"
          default-time="00:00:00"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          v-model="form.endTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="统计时间类型">
        <el-select v-model="form.timeType" size="mini">
          <el-option label="每10分钟" value="10m"></el-option>
          <el-option label="每1小时" value="1h"></el-option>
          <el-option label="每2小时" value="2h"></el-option>
          <el-option label="每6小时" value="6h"></el-option>
          <el-option label="每12小时" value="12h"></el-option>
          <el-option label="每24小时" value="24h"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <p class="data" v-show="show">暂无数据</p>
    <div id="single" v-show="shows" style="height: 74.5vh"></div>
  </div>
</template>

<script>
import { getBdDataList } from "../../../../api/Monitoring";
import moment from "moment";
import Axios from "axios";
export default {
  name: "CumulativeAnalysisChart",
  props: {
    node: Object,
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      shows: true,
      selecteds: false,
      form: {
        timeType: "1h",
        startTime: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD hh:mm:ss"),
      },
      show: false,
    };
  },
  methods: {
    SinglePointAnalysis(queryData, list, sensorName, parameter) {
      let xdata = [],
        ydata = [],
        hdata = [],
        pdata = [],
        theDate = [],
        firstLevel = [],
        secondLevel = [],
        thirdLevel = [],
        firstLevel1 = [],
        secondLevel1 = [],
        thirdLevel1 = [];
      for (let i = list.length - 1; i >= 0; i--) {
        // console.log(list[i]);
        xdata.push(list[i].totalX.toFixed(3));
        ydata.push(list[i].totalY.toFixed(3));
        hdata.push(list[i].totalH.toFixed(3));
        pdata.push(list[i].totalP.toFixed(3));
        theDate.push(list[i].theDate);
        if (parameter.firstLevel !== null) {
          firstLevel.push(parameter.firstLevel.toFixed(3));
          firstLevel1.push(-parameter.firstLevel.toFixed(3));
        }
        if (parameter.secondLevel !== null) {
          secondLevel.push(parameter.secondLevel.toFixed(3));
          secondLevel1.push(-parameter.secondLevel.toFixed(3));
        }
        if (parameter.thirdLevel !== null) {
          thirdLevel.push(parameter.thirdLevel.toFixed(3));
          thirdLevel1.push(-parameter.thirdLevel.toFixed(3));
        }
      }
      let option = {
        title: {
          text: "表面位移" + sensorName + "数据分析图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let tip = params[0].name + "<br/>";
            for (let y = 0; y < params.length; y++) {
              tip +=
                params[y].marker +
                params[y].seriesName +
                " : " +
                params[y].value +
                " mm<br/>";
            }
            return tip;
          },
        },
        color: [
          "#00BBFF",
          "#003C9D",
          "#888888",
          "#FF0000",
          "#FF7744",
          "#FFCC22",
        ],
        legend: {
          // bottom: "bottom",
          top: 30,
          itemHeight: 2,
          data: [
            { name: "WGS84-∆X", icon: "rect" },
            { name: "WGS84-∆Y", icon: "rect" },
            { name: "WGS84-∆H", icon: "rect" },
            { name: "一级预警", icon: "rect" },
            { name: "二级预警", icon: "rect" },
            { name: "三级预警", icon: "rect" },
          ],
          selected: {
            一级预警: false,
            二级预警: false,
            三级预警: false,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          right: "5%",
        },
        xAxis: {
          name: "时间",
          nameLocation: "center",
          nameTextStyle: {
            padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
          },
          type: "category",
          boundaryGap: false,
          data: theDate,
        },
        yAxis: {
          name: "位移(mm)",
          type: "value",
          // axisLabel: {
          //     formatter: '{value} mm'
          // }
        },

        series: [
          {
            name: "WGS84-∆X",
            type: "line",
            data: xdata,
          },
          {
            name: "WGS84-∆Y",
            type: "line",
            data: ydata,
          },
          {
            name: "WGS84-∆H",
            type: "line",
            data: hdata,
          },
          {
            name: "一级预警",
            type: "line",
            data: firstLevel,
            lineStyle: {
              color: "#FF0000",
            },
          },
          {
            name: "一级预警",
            type: "line",
            data: firstLevel1,
            lineStyle: {
              color: "#FF0000",
            },
          },
          {
            name: "二级预警",
            type: "line",
            data: secondLevel,
            lineStyle: {
              color: "#FF7744",
            },
          },
          {
            name: "二级预警",
            type: "line",
            data: secondLevel1,
            lineStyle: {
              color: "#FF7744",
            },
          },
          {
            name: "三级预警",
            type: "line",
            data: thirdLevel,
            lineStyle: {
              color: "#FFCC22",
            },
          },
          {
            name: "三级预警",
            type: "line",
            data: thirdLevel1,
            lineStyle: {
              color: "#FFCC22",
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("single"));
      myChart.hideLoading();
      myChart.setOption(option);
      myChart.resize();
      myChart.on("legendselectchanged", function (params) {
        var selected = params.selected;
        if (selected["WGS84-∆X"] == false) {
          if (selected["WGS84-∆Y"] == false) {
            if (selected["WGS84-∆H"] == true) {
              option.legend.selected["一级预警"] = true;
              option.legend.selected["二级预警"] = true;
              option.legend.selected["三级预警"] = true;
            }
          }
        }
        if (selected["WGS84-∆Y"] == false) {
          if (selected["WGS84-∆H"] == false) {
            if (selected["WGS84-∆X"] == true) {
              option.legend.selected["一级预警"] = true;
              option.legend.selected["二级预警"] = true;
              option.legend.selected["三级预警"] = true;
            }
          }
        }
        if (selected["WGS84-∆H"] == false) {
          if (selected["WGS84-∆X"] == false) {
            if (selected["WGS84-∆Y"] == true) {
              option.legend.selected["一级预警"] = true;
              option.legend.selected["二级预警"] = true;
              option.legend.selected["三级预警"] = true;
            }
          }
        }
        if (selected["WGS84-∆H"] == true) {
          if (selected["WGS84-∆X"] == true) {
            if (selected["WGS84-∆Y"] == true) {
              option.legend.selected["一级预警"] = false;
              option.legend.selected["二级预警"] = false;
              option.legend.selected["三级预警"] = false;
            }
          }
        }
        myChart.setOption(option);
      });
    },
    search() {
      this.shows = true;
      this.show = false;
      let myChart = this.$echarts.init(document.getElementById("single"));
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD hh:mm:ss"),
        timeType: this.form.timeType,
        monitorCode: this.node.monitorCode,
        monitorId: this.node.id,
      };
      Axios({
        url: "/bdData/getBdDataList",
        params: queryData,
      }).then((res) => {
        if (res.data.resultCode == "204") {
          this.shows = false;
          this.show = true;
          this.$message({
            message: "暂无数据",
            offset: 450,
            duration: 1000,
          });
        } else if (res.data.resultCode == "200") {
          this.show = false;
          this.shows = true;
          let list = res.data.parameter.list;
          let parameter = res.data.parameter;
          this.SinglePointAnalysis(queryData, list, this.node.label, parameter);
        }
      });
    },
  },
  mounted() {
    this.shows = true;
    this.show = false;
    let myChart = this.$echarts.init(document.getElementById("single"));
    myChart.showLoading();
    let queryData = {
      startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
      endTime: moment(this.form.endTime).format("YYYY-MM-DD hh:mm:ss"),
      timeType: "1h",
      monitorCode: this.node.monitorCode,
      monitorId: this.node.id,
    };
    Axios({
      url: "/bdData/getBdDataList",
      params: queryData,
    }).then((res) => {
      // console.log(res);
      console.log(res);
      if (res.data.resultCode == "204") {
        this.shows = false;
        this.show = true;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      } else if (res.data.resultCode == "200") {
        this.show = false;
        this.shows = true;
        this.stateNow = 1;
        let list = res.data.parameter.list;
        let parameter = res.data.parameter;
        this.SinglePointAnalysis(queryData, list, this.node.label, parameter);
      }
    });
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
  overflow: auto;
}
.el-form-item {
  margin-bottom: 0;
}
.data {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
</style>
